package com.song.tradition.page.components

import android.annotation.SuppressLint
import android.app.Person
import android.content.Context
import android.icu.text.CaseMap.Title
import android.net.Uri
import android.view.ViewGroup
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.KeyboardArrowRight
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.modifier.modifierLocalConsumer
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.compose.ui.zIndex
import androidx.constraintlayout.compose.ConstraintLayout
import com.google.android.exoplayer2.MediaItem
import com.google.android.exoplayer2.SimpleExoPlayer
import com.google.android.exoplayer2.source.ProgressiveMediaSource
import com.google.android.exoplayer2.ui.PlayerView
import com.google.android.exoplayer2.upstream.DataSource
import com.google.android.exoplayer2.upstream.DefaultDataSourceFactory
import com.google.android.exoplayer2.util.Util
import com.song.tradition.R
import com.song.tradition.entity.*
import com.song.tradition.ui.theme.customBgColor
import com.song.tradition.ui.theme.customCardBgColor
import com.song.tradition.ui.theme.customTextColor
import com.song.tradition.ui.theme.customTitleColor
import com.song.tradition.ui.theme.text100
import kotlinx.coroutines.processNextEventInCurrentThread


@SuppressLint("ResourceType")
@Composable
fun CategoryItem(
    data: GrassData,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier
            .width(155.dp)
            .height(200.dp),
        shape = RoundedCornerShape(10.dp),
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(customCardBgColor)
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()

                    .padding(start = 8.dp, end = 8.dp, top = 8.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
            ) {

                var isClick by remember {
                    mutableStateOf(
                        true
                    )
                }
                Column {
                    if (isClick){
                        Icon(
                            imageVector =  Icons.Default.FavoriteBorder,
                            contentDescription = "",
                            modifier = Modifier
                                .size(24.dp)
                                .clip(CircleShape)
                                .clickable {
                                    isClick = !isClick
                                }
                        )
                    }else{
                        Icon(
                            imageVector =  Icons.Default.Favorite ,
                            contentDescription = "",
                            modifier = Modifier
                                .size(24.dp)
                                .clip(CircleShape)
                                .clickable {
                                    isClick = !isClick
                                }
                        , tint = Color.Red
                        )
                    }


                    Spacer(modifier = Modifier.height(32.dp))
                    Text(text = data.name, fontWeight = FontWeight.Bold)
                }


                Image(
                    painter = painterResource(id = data.resId), contentDescription = "",
                    modifier = Modifier
                        .size(64.dp)
                        .clip(CircleShape),
                    contentScale = ContentScale.FillBounds
                )


            }
            Spacer(modifier = Modifier.height(16.dp))
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(horizontal = 8.dp)
            ) {

                Text(
                    text = data.description, fontSize = 14.sp,
                    maxLines = 5,
                    overflow = TextOverflow.Ellipsis,
                    lineHeight = 20.sp
                )
            }
        }

    }
}


@Composable
fun LinearStoryItemCard(
    data: StoryData,
    modifier: Modifier = Modifier
) {

    ConstraintLayout(
        modifier = modifier
            .fillMaxWidth()
            .padding(top = 8.dp)
            .background(Color.Transparent)
    ) {
        val (avatar, boxBg) = createRefs()
        Card(modifier = Modifier
            .constrainAs(avatar) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom, 16.dp)
                start.linkTo(parent.start, 16.dp)
            }
            .width(120.dp)
            .height(130.dp)
            .zIndex(1f),
            shape = RoundedCornerShape(15.dp),
            elevation = CardDefaults.cardElevation(2.dp),
            border = BorderStroke(1.dp, color = customCardBgColor)
        ) {
            Image(
                painterResource(id = data.resId),
                contentDescription = "",
                contentScale = ContentScale.FillHeight,
                modifier = Modifier.fillMaxSize()

            )
        }
        Box(modifier = Modifier
            .constrainAs(boxBg) {
                bottom.linkTo(parent.bottom)
                start.linkTo(parent.start, 16.dp)
                end.linkTo(parent.end, 16.dp)
            }
            .height(120.dp)
            .fillMaxWidth()
            .clip(RoundedCornerShape(10.dp))
            .background(color = customCardBgColor)) {


            Row() {
                Box(
                    modifier = Modifier
                        .width(136.dp)
                        .fillMaxHeight()
                )

                Column(modifier = Modifier.padding(8.dp)) {
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween
                    ) {
                        var isClick by remember {
                            mutableStateOf(
                                true
                            )
                        }

                        Text(text = data.name, fontWeight = FontWeight.Bold)
                        if (isClick){
                            Icon(
                                imageVector =  Icons.Default.FavoriteBorder,
                                contentDescription = "",
                                modifier = Modifier
                                    .size(24.dp)
                                    .clip(CircleShape)
                                    .clickable {
                                        isClick = !isClick
                                    }
                            )
                        }else{
                            Icon(
                                imageVector =  Icons.Default.Favorite ,
                                contentDescription = "",
                                modifier = Modifier
                                    .size(24.dp)
                                    .clip(CircleShape)
                                    .clickable {
                                        isClick = !isClick
                                    }
                                , tint = Color.Red
                            )
                        }

                    }
                    Spacer(modifier = Modifier.height(8.dp))
                    Box(modifier = Modifier.fillMaxSize()) {
                        Text(
                            text = data.description, fontSize = 14.sp,
                            maxLines = 3,
                            overflow = TextOverflow.Ellipsis,
                            lineHeight = 20.sp
                        )
                    }
                }

            }


        }


    }

}


@SuppressLint("ResourceType")
@Composable
fun LinearGrassItemCard(
    data: GrassData,
    modifier: Modifier = Modifier
) {

    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 8.dp)
            .background(Color.Transparent)
    ) {
        val (avatar, boxBg) = createRefs()

        Card(modifier = Modifier
            .constrainAs(avatar) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom, 16.dp)
                start.linkTo(parent.start, 16.dp)
            }
            .width(120.dp)
            .height(130.dp)
            .zIndex(1f),
            shape = RoundedCornerShape(15.dp),
            elevation = CardDefaults.cardElevation(5.dp)
        ) {
            Image(
                painterResource(id = data.resId),
                contentDescription = "",
                contentScale = ContentScale.FillHeight,
                modifier = Modifier.fillMaxSize()

            )
        }

        Box(modifier = Modifier
            .constrainAs(boxBg) {
                bottom.linkTo(parent.bottom)
                start.linkTo(parent.start, 16.dp)
                end.linkTo(parent.end, 16.dp)
            }
            .height(120.dp)
            .fillMaxWidth()
            .clip(RoundedCornerShape(10.dp))
            .background(color = customCardBgColor)) {


            Row() {
                Box(
                    modifier = Modifier
                        .width(136.dp)
                        .fillMaxHeight()
                )

                Column(modifier = Modifier.padding(8.dp)) {
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween
                    ) {

                        var isClick by remember {
                            mutableStateOf(
                                true
                            )
                        }

                        Text(text = data.name, fontWeight = FontWeight.Bold)
                        if (isClick){
                            Icon(
                                imageVector =  Icons.Default.FavoriteBorder,
                                contentDescription = "",
                                modifier = Modifier
                                    .size(24.dp)
                                    .clip(CircleShape)
                                    .clickable {
                                        isClick = !isClick
                                    }
                            )
                        }else{
                            Icon(
                                imageVector =  Icons.Default.Favorite ,
                                contentDescription = "",
                                modifier = Modifier
                                    .size(24.dp)
                                    .clip(CircleShape)
                                    .clickable {
                                        isClick = !isClick
                                    }
                                , tint = Color.Red
                            )
                        }

                    }
                    Spacer(modifier = Modifier.height(8.dp))
                    Box(modifier = Modifier.fillMaxSize()) {
                        Text(
                            text = data.description, fontSize = 14.sp,
                            maxLines = 3,
                            overflow = TextOverflow.Ellipsis,
                            lineHeight = 20.sp
                        )
                    }
                }

            }


        }


    }

}

@Composable
fun BookCard(bookData: BookData, click: () -> Unit? = {}) {
    Surface(
        modifier = Modifier
            .width(270.dp)
            .height(140.dp),
        shadowElevation = 2.dp,
        shape = RoundedCornerShape(10.dp)
    ) {

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(customCardBgColor)
                .padding(8.dp)
        ) {
            Image(
                painterResource(id = bookData.resId),
                contentDescription = "",

                modifier = Modifier
                    .fillMaxHeight()
                    .clip(RoundedCornerShape(10.dp)),
            )
            Spacer(modifier = Modifier.width(8.dp))

            Column(
                Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(),
                verticalArrangement = Arrangement.SpaceBetween,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {

                Column {
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(text = bookData.bookName, fontSize = 16.sp)
                        Icon(
                            imageVector = Icons.Default.FavoriteBorder,
                            contentDescription = "",
                            modifier = Modifier.size(24.dp)
                        )
                    }
                    Spacer(modifier = Modifier.height(8.dp))

                    Text(text = bookData.author, fontSize = 14.sp, color = customTextColor)
                }

                Button(
                    onClick = { click.invoke() },
                    colors = ButtonDefaults.buttonColors(
                        containerColor = customBgColor,
                        contentColor = Color.Black.copy(alpha = 0.8f)
                    ),
                    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
                ) {
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        horizontalArrangement = Arrangement.Center
                    ) {
                        Text(text = "更多详情")
                        Icon(
                            imageVector = Icons.Default.KeyboardArrowRight,
                            contentDescription = ""
                        )
                    }

                }

            }

        }

    }

}

@Composable
fun TitleWithMoreTab(title: String, click: () -> Unit) {

    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {

        Text(title, fontWeight = FontWeight.Bold, fontSize = 20.sp, color = text100)

        IconButton(
            onClick = { click.invoke() }, modifier = Modifier
                .size(56.dp)
                .clip(CircleShape)
        ) {
            Text("更多", fontSize = 14.sp, color = text100)
        }

    }

}


@Composable
fun PersonCard(info: StoryData, modifier: Modifier = Modifier) {
    Surface(
        modifier = modifier
            .width(130.dp)
            .height(180.dp),
        shape = RoundedCornerShape(10.dp),
        shadowElevation = 3.dp
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(customCardBgColor)
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceAround
        ) {
            Card(
                modifier = Modifier.size(100.dp),
                shape = CircleShape,
                elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
            ) {
                Image(
                    painterResource(id = info.resId), contentDescription = "",
                    modifier = Modifier.fillMaxWidth(),
                    contentScale = ContentScale.Crop
                )
            }

            Spacer(modifier = Modifier.height(8.dp))
            Text(text = info.name, fontSize = 18.sp)
        }

    }
}


@Composable
fun VideoCard(url: String, context: Context) {

    val exoplayer = remember(context) {
        SimpleExoPlayer.Builder(context).build().apply {
            val dataSourceFactory: DataSource.Factory =
                DefaultDataSourceFactory(context, Util.getUserAgent(context, context.packageName))
            val mediaItem = MediaItem.fromUri(Uri.parse(url))
            val source =
                ProgressiveMediaSource.Factory(dataSourceFactory).createMediaSource(mediaItem)

            this.prepare(source)
        }

    }

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(186.dp),
        elevation = CardDefaults.cardElevation(3.dp),
        shape = RoundedCornerShape(10.dp)
    ) {
        AndroidView(factory = { context ->
            PlayerView(context).apply {
                player = exoplayer
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT
                )
            }
        }, modifier = Modifier.fillMaxSize())
    }


}


@Composable
fun WebViewCard(data: WebViewData, modifier: Modifier = Modifier) {
    Card(
        modifier = modifier
            .width(155.dp)
            .height(130.dp),
        shape = RoundedCornerShape(10.dp)
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(customCardBgColor)
        ) {

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(80.dp)
                    .clip(RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp))
            ) {
                Image(
                    painterResource(id = data.resId),
                    contentDescription = "",
                    modifier = Modifier.fillMaxWidth(),
                    contentScale = ContentScale.Crop
                )

                Box(
                    modifier = Modifier
                        .padding(end = 8.dp, top = 4.dp)
                        .background(customCardBgColor)
                        .align(Alignment.TopEnd),
                ) {
                    Text(
                        text = data.source,
                        modifier = Modifier.clip(RoundedCornerShape(10.dp))
                            .padding(2.dp),
                        fontSize = 12.sp,
                        color = Color.White
                    )
                }
            }



            Spacer(modifier = Modifier.height(4.dp))

            Text(
                text = data.title,
                maxLines = 2,
                modifier = Modifier.padding(8.dp),
                fontSize = 14.sp,
                lineHeight = 16.sp
            )

        }

    }
}


@Preview
@Composable
fun WebViewDataTest() {
    val data = WebViewData(R.drawable.history01, "支援中医", url = "")
    WebViewCard(data = data)
}